<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <title>短信验证</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link rel="stylesheet" href="/static/css/login1/style.css" type="text/css" media="all">
</head>
<body>

<h1>短信验证</h1>

<div class="container w3layouts agileit">

    <div class="login w3layouts agileits">
        <h2>短信验证</h2>
        <p>${message}</p>
        <form action="/login" method="post">
            <input type="text" id="phone" placeholder="请输入手机号"/>
            <input type="password" id="code" placeholder="请输入验证码"/>
            <div class="send-button w3layouts agileits">
                <form>
                    <input style="margin-bottom:15px;" type="button" id="sendCode" value="发送验证码" class="btn"/>
                </form>

                <form>
                    <input type="submit" id="btnLogin" value="登 录" class="btn">
                </form>
            </div>
        </form>
        <div class="clear"></div>
    </div>
    <div class="copyrights">Collect from <a href="#">@844199000qq.com</a>
    </div>
    <div class="clear"></div>

</div>

<div class="footer w3layouts agileits">
    <p>Copyright &copy; More Templates <a href="#" target="_blank" title="@844199000qq.com">@844199000qq.com</a> -
        Collect from <a href="#" title="@844199000qq.com" target="_blank">@844199000qq.com</a></p>
</div>
</body>
<script type="text/javascript" src="/static/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    var id;//定制器的id,停止定时地需要
    var count = 60;//倒计时的时间,单位秒
    $(function () {
        $("#sendCode").click(function () {
            //获取手机号
            var phone = $("#phone").val();
            if (phone.length == 0) {
                alert("手机号不能为空!");
                return;
            }
            //禁用按钮
            $(this).attr("disabled", "disabled");
            //启动倒计时
            id = setInterval("time()", 1000);
            //发送ajax请求
            $.getJSON("/user/sendCode", {phone: phone}, function (result) {
                if (result.msg == "OK") {
                    alert("验证码已发送");
                } else {
                    alert(result.msg);
                }
            });
        });

        $("#btnLogin").click(function () {
            var code = $("#code").val();
            $.getJSON("/user/logins", {code: code}, function (result) {

                if (result.msg == "ok") {
                    location.href = "/phoneIndex";
                } else {
                    alert(result.msg);
                }
            })
        })
    });
    var count = 60;

    function time() {
        count--;
        if (count == 0) {
            $('#sendCode').removeAttr("disabled");
            count = 60;
            $('#sendCode').val("重新发送");
            //停止计时
            clearInterval(id);
        } else {
            $('#sendCode').val(count + 's后,重新发送');
        }
    }

</script>
</html>